<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <style>
        #main{
            padding: 0.25em;
            background-color: #e5e5e5;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }
        .magnetic-post{
            padding: 0.5em 0 0 0;
        }
        
        .display-box{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .box-orient-v{
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
                    flex-flow: column;
        }
        .box-orient-h{
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
                    flex-flow: row;
        }
        .box-flex-1{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
        .box-flex-2{
            -webkit-box-flex: 2;
            -webkit-flex: 2;
            flex: 2;
        }
        .mag-post-left{
            padding-right: 0.25em;
        }
        .mag-post-right{
            padding-left: 0.25em;
        }
        .magnetic-post .v{
            padding-bottom: 0.5em;
        }
        .mag-post{
            background-color: #FFF;
        }
        .mine-box{
            padding-right: 0.25em;
        }
        .more-box{
            padding-left: 0.25em;
        }
        .mag-post{
            padding-left: 0.8em;
            padding-top: 1.1em;
        }
        .mag-post .title,.mag-post .des{
            color: #FFF;
            display: block;
        }
        .super{
            background:#e66961 url(../image/icon_1.png) right bottom no-repeat;
            background-size: 40%;
        }
        .super:active{
            background-color:#f0766e;
        }
        .taobao{
            background:#9e9a8d url(../image/icon_2.png) right bottom no-repeat;
            background-size: 40%;
        }
        .taobao:active{
            background-color:#b1ad9f;
        }
        .mission-fan{
            background:#6ab494 url(../image/icon_6.png) right bottom no-repeat;
            background-size: 30%;
        }
        .mission-fan:active{
            background-color:#79c5a4;
        }
        .worth{
            background:#ebd275 url(../image/icon_4.png) right bottom no-repeat;
            background-size: 30%;
        }
        .worth:active{
            background-color:#f7df85;
        }
        .dazhong{
            background:#6ab494 url(../image/icon_3.png) right bottom no-repeat;
            background-size: 40%;
        }
        .dazhong:active{
            background-color:#79c5a4;
        }
        .hotel-ticket{
            background:#d8c09d url(../image/icon_5.png) right bottom no-repeat;
            background-size: 30%;
        }
        .hotel-ticket:active{
            background-color:#e5ce9c;
        }
        .mine{
            background:#e66961 url(../image/icon_7.png) right bottom no-repeat;
            background-size: 40%;
        }
        .mine:active{
            background-color:#f0766e;
        }
        .more{
            background:#ebd275 url(../image/icon_8.png) right 50px no-repeat;
            background-size: 40%;
        }
        .more:active{
            background-color:#f7df85;
        }
        .super .title,.taobao .title,.dazhong .title{
            font-size: 1.8em;
            position: relative;
        }
        .super .des,.taobao .des,.dazhong .des{
            font-size: 0.75em;
            position: relative;
            display: block;
        }
        .mission-fan .title,.worth .title,.hotel-ticket .title,.mine .title,.more .title{
            font-size: 1.1em;
            position: relative;
            display: block;
        } 
        
        
    </style>
</head>
<body ontouchstart="">
    <div id="wrap">
        <div id="main">
            <div id="slider" class="swipe">
                <div class="swipe-wrap">
                    <div class="swipe-box" tapmode data-url="http://www.kuche.cc/" data-title="库车主页" data-frameName="" onclick="toWeb(this);">                    
                        <img src="../image/title.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode data-url="http://www.kuche.cc/" data-title="库车主页" data-frameName="" onclick="toWeb(this);">
                        <img src="../image/title.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode data-url="http://www.kuche.cc/" data-title="库车主页" data-frameName="" onclick="toWeb(this);">
                        <img src="../image/title.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode data-url="http://www.kuche.cc/" data-title="库车主页" data-frameName="" onclick="toWeb(this);">
                        <img src="../image/title.png" alt="">
                    </div>
                    <div class="swipe-box" tapmode data-url="http://www.kuche.cc/" data-title="库车主页" data-frameName="" onclick="toWeb(this);">
                        <img src="../image/title.png" alt="">
                    </div>
                </div>
                <div id="title-box">
                    <ul id="title-box-ul">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="magnetic-post display-box box-orient-h box-flex-1">
                <div class="mag-post-left display-box box-orient-v box-flex-1">
                    <div class="v box-flex-2 display-box">
                        <div class="mag-post super box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-2" data-title="柴米油盐" data-frameName="" onclick="toWeb(this);">                        	                                                   
                            <span class="title">柴米油盐</span>
                            <span class="des">米面粮油、厨房调料</span>
                        </div>
                    </div>
                    <div class="v box-flex-2 display-box">
                        <div class="mag-post taobao box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-3" data-title="酒水零食" data-frameName="" onclick="toWeb(this);">
                            <span class="title">酒水零食</span>
                            <span class="des">休闲零食、酒水饮料</span>
                        </div>
                    </div>
                    <div class="v box-flex-1 display-box" tapmode data-url="http://www.kuche.cc/gallery-11" data-title="化妆护理" data-frameName="" onclick="toWeb(this);">
                        <div class="mag-post mission-fan box-flex-1" tapmode>
                        	<span class="title">化妆护理</span>
                        	<!--<span class="des">美容化妆、个人护理</span>-->
                        </div>
                    </div>
                </div>
                <div class="mag-post-right display-box box-orient-v box-flex-1">
                    <div class="v box-flex-1  display-box">
                        <div class="mag-post worth box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-1" data-title="居家生活" data-frameName="" onclick="toWeb(this);">
                            <span class="title">居家生活</span>
                        </div>
                    </div>
                    <div class="v box-flex-2 display-box">
                        <div class="mag-post dazhong box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-1" data-title="果蔬生鲜" data-frameName="" onclick="toWeb(this);">
                            <span class="title">果蔬生鲜</span>
                            <span class="des">网上菜场、果蔬生鲜</span> 
                        </div>
                    </div>
                    <div class="v box-flex-1 display-box">
                        <div class="mag-post hotel-ticket box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-241" data-title="母婴专区" data-frameName="" data-index="2" onclick="toWeb(this);">
                            <span class="title">母婴专区</span>
                            <!--<span class="des">母婴用品、儿童玩具</span>-->
                        </div>
                    </div>
                    <div class="v box-flex-1 display-box">
                        <div class="box-flex-1 display-box box-orient-h">
                            <div class="box-flex-1 display-box mine-box">
                                <div class="mag-post mine box-flex-1" tapmode data-url="http://www.kuche.cc/gallery-242" data-title="本地特产" data-frameName="" onclick="toWeb(this);">
                                    <span class="title">本地特产</span>
                                    <!--<span class="des">民族品牌、本地特产</span>-->
                                </div>                                
                            </div>
                            <div class="box-flex-1 display-box more-box">
                                <div class="mag-post more box-flex-1" tapmode data-url="http://www.kuche.cc/" data-title="更多" data-frameName="" onclick="toWeb(this);">
                                    <span class="title">更多</span>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">

    apiready = function(){
        var aLi = $api.domAll('#title-box-ul li');
        window.mySwipe = Swipe($api.byId('slider'),{
            auto: 3000,
            continuous: true,
            callback: function(index,elem) {
                var i = aLi.length;
                while (i--) {
                    aLi[i].className = '';
                }
//              aLi[index].className = 'active';
            }
        });
    };
</script>
</html>